<template>
  <view class="container">
    <view class="page-title">帮助中心</view>
    
    <view class="help-container">
      <view class="help-category">
        <text class="category-title">常见问题</text>
        
        <view class="question-item" v-for="(item, index) in faqList" :key="index" @click="toggleAnswer(index)">
          <view class="question">
            <text>{{ item.question }}</text>
            <u-icon name="arrow-down" :rotate="item.showAnswer ? 180 : 0" size="24" color="#999"></u-icon>
          </view>
          
          <view class="answer" v-if="item.showAnswer">
            <text>{{ item.answer }}</text>
          </view>
        </view>
      </view>
      
      <view class="contact-info">
        <text class="contact-title">联系我们</text>
        <text class="contact-content">客服电话：400-123-4567</text>
        <text class="contact-content">工作时间：周一至周五 9:00-18:00</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      faqList: [
        {
          question: '如何修改个人信息？',
          answer: '在"我的"页面点击头像可以修改头像，其他信息请联系管理员修改。',
          showAnswer: false
        },
        {
          question: '忘记密码怎么办？',
          answer: '可以通过登录页面的"忘记密码"功能，使用手机号验证码重置密码。',
          showAnswer: false
        },
        {
          question: '如何查看缴费记录？',
          answer: '在"我的"页面点击"缴费记录"即可查看所有缴费明细。',
          showAnswer: false
        },
        {
          question: '宿舍报修流程是什么？',
          answer: '在首页点击"宿舍报修"，填写报修内容提交即可，工作人员会尽快处理。',
          showAnswer: false
        }
      ]
    }
  },
  methods: {
    toggleAnswer(index) {
      this.faqList[index].showAnswer = !this.faqList[index].showAnswer
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  padding: 30rpx 0;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.help-container {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 30rpx;
}

.help-category {
  margin-bottom: 40rpx;
}

.category-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
}

.question-item {
  border-bottom: 1px solid #eee;
  padding: 20rpx 0;
}

.question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 28rpx;
  color: #333;
}

.answer {
  font-size: 26rpx;
  color: #666;
  margin-top: 15rpx;
  padding-left: 0;
  line-height: 1.6;
}

.contact-info {
  background-color: #f9f9f9;
  padding: 25rpx;
  border-radius: 8rpx;
}

.contact-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.contact-content {
  display: block;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 15rpx;
}
</style>